<script setup>
import { onMounted, ref } from 'vue'
const activeIndex = ref('4')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
const logoImg = require('../assets/logo.png')
onMounted(() => {
})
</script>
<template>
  <el-header>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="1">
        <el-image :src="logoImg" fit="fill" class="logo"></el-image>
        <span>天下游旅游管理系统</span></el-menu-item>
      <div class="flex-grow"/>
      <el-menu-item index="6">首页</el-menu-item>
      <el-menu-item index="1">网站公告</el-menu-item>
      <el-menu-item index="5">景点列表</el-menu-item>
      <el-menu-item index="2">注册</el-menu-item>
      <el-menu-item index="3">登录</el-menu-item>
      <el-menu-item index="4">个人中心</el-menu-item>
      <!--            <el-sub-menu index="2">-->
      <!--              <template #title>我的</template>-->
      <!--              <el-menu-item index="2-1">个人中心</el-menu-item>-->
      <!--              <el-menu-item index="2-2">登录</el-menu-item>-->
      <!--              <el-menu-item index="2-3">注册</el-menu-item>-->
      <!--            </el-sub-menu>-->
    </el-menu>
  </el-header>
</template>

<style scoped>

</style>
